<template>
  <div class="q-pa-md">
    <!--增加修改动作弹框-->
    <modify-action
      @close="closeDialog"
      @onConfirm="confirmClick"
      :showValue="isShowDialog"
      :is-modify="isModify"
      :modify-fields="modifyFields"
      @modifyNewField="modifyNewFieldConfirm"
      @deleteField="deleteModifyFieldClick"
      @reset="resetClick"
    ></modify-action>
    <q-table
      title="动作列表"
      :rows="rows"
      :columns="columns"
      row-key="name"
      flat
      bordered
      style="height: 100%"
      :filter="filter"
      :filter-method="filterMethod"
      :rows-per-page-options="[8]"
      rows-per-page-label="每页记录数"
    >
      <!--顶部插槽-->
      <template v-slot:top-right>
        <q-input
          borderless
          dense
          debounce="300"
          v-model="filter"
          placeholder="搜索动作"
          class="rounded-borders bg-grey-4"
          style="padding: 0 10px"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
        <q-btn
          round
          color="primary"
          icon="add"
          style="margin-left: 20px"
          @click="showAddActionDialog"
        />
      </template>
      <!--列名插槽-->
      <template v-slot:header="props">
        <q-tr :props="props" class="my-header">
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
      <!--数据插槽-->
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="actionPath" :props="props"> {{ props.row[0].value }}</q-td>
          <q-td key="actionName" :props="props"> {{ props.row[1].value }}</q-td>
          <q-td key="modify" :props="props">
            <q-btn
              align="around"
              size="sm"
              color="primary"
              label="修改"
              icon="edit"
              @click="modifyActionClick(props.row, props.rowIndex)"
            />
          </q-td>
          <q-td key="delete" :props="props">
            <q-btn
              align="around"
              size="sm"
              color="red-10"
              label="删除"
              icon="delete"
              @click="deleteActionClick(props.rowIndex)"
            />
          </q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>

<script setup>
import { useDataStore } from "stores/data";
import { ref, toRaw } from "vue";
// eslint-disable-next-line no-unused-vars
import ModifyAction from "pages/action/ModifyAction.vue";
import { useQuasar } from "quasar";

const columns = [
  {
    name: "actionPath",
    required: true,
    label: "动作路径",
    align: "left",
    field: (row) => row.actionPath,
    format: (val) => `${val}`,
  },
  {
    name: "actionName",
    align: "left",
    label: "动作名称",
    field: (row) => row.actionName,
  },
  { name: "modify", align: "center", label: "修改" },
  { name: "delete", align: "center", label: "删除" },
];

const rows = ref(useDataStore().actionList);
const isShowDialog = ref(false);
const isModify = ref(false);
const modifyFields = ref();
let originFields = [];
const modifyIndex = ref(0);
const filter = ref(null);
const $q = useQuasar();
// console.log('--------', $q.lang.isoName)
function filterMethod(rows, terms, cols, getCellValue) {
  // console.log('查询结果', rows.value, terms)
  // console.log('查询结果', toRaw(rows), terms)
  return rows.filter((arr2) => {
    // arr2.forEach((value) => {
    //   console.log('value', value, terms, value.value.indexOf(terms))
    //   if (value.value.indexOf(terms) !== -1) {
    //     return true
    //   }
    // })
    for (let i = 0; i < arr2.length; i++) {
      if (arr2[i].value.indexOf(terms) !== -1) {
        return true;
      }
    }
    return false;
  });
}

/**
 * 还原动作，只有modifyFields需要还原
 */
function resetClick() {
  modifyFields.value = JSON.parse(JSON.stringify(originFields));
}

/**
 * 点击新增按钮显示添加/修改动作弹框
 */
function showAddActionDialog() {
  isShowDialog.value = true;
  isModify.value = false;
}

/**
 * 表格行中的修改按钮点击事件
 * @param data
 * @param index
 */
function modifyActionClick(data, index) {
  originFields = JSON.parse(JSON.stringify(toRaw(data)));
  modifyIndex.value = index;
  // 这里需要JSON序列化重新生成一个新对象，不然在修改的弹框里面的改动会实时反映到表格中
  const modifyData = JSON.parse(JSON.stringify(toRaw(data)));
  modifyFields.value = modifyData;
  isModify.value = true;
  isShowDialog.value = true;
}

/**
 * 从修改页面进入删除字段
 * @param index
 */
function deleteModifyFieldClick(index) {
  modifyFields.value.splice(index, 1);
}

/**
 * 修改弹框新增字段
 * @param obj
 */
function modifyNewFieldConfirm(obj) {
  modifyFields.value.push(obj);
}

/**
 * 删除动作
 * @param index
 */
function deleteActionClick(index) {
  console.log("删除动作", index);
  $q.dialog({
    title: "提示",
    message: `您确定删除动作${useDataStore().actionList[index][0].value}吗？`, // 动作路径
    cancel: true,
    persistent: true,
  })
    .onOk(() => {
      useDataStore().actionList.splice(index, 1);
    })
    .onCancel(() => {
      console.log("Cancel");
    })
    .onDismiss(() => {
      // console.log('I am triggered on both OK and Cancel')
    });
}

/**
 * 关闭弹框
 */
function closeDialog() {
  isShowDialog.value = false;
}

/**
 * 添加动作
 * @param fields
 * @param isModify
 */
function confirmClick(fields, isModify) {
  isShowDialog.value = false;
  if (!isModify) {
    // 添加
    console.log("确认增加动作", isModify, fields);
    useDataStore().actionList.push(fields);
  } else {
    // 修改
    console.log(
      "确认修改动作",
      isModify,
      toRaw(modifyFields.value),
      modifyIndex.value
    );
    useDataStore().actionList.splice(
      modifyIndex.value,
      1,
      toRaw(modifyFields.value)
    );
  }
}
</script>

<style scoped>
.my-header th {
  color: black;
  font-weight: bold;
  font-size: 13px;
  position: sticky;
  z-index: 1;
  background: white;
}

.my-header:first-child th {
  top: 0;
}
</style>
